<template>

    <div class="offcn_head">
        <div class="offcn_size">
            <div class="eTop_nav">
                <!--                用户登录注册 搜索-->
                <div class="eTopRight">
                    <div class="eUser">
                        <p class="eLogin" v-if="!isLogin"  >
                            <a href="/foreuser/login/" rel="nofollow">登录</a>
                            <a href="/foreuser/register/" rel="nofollow">注册</a>
                        </p>
                        <a href="/mycourse/index/">
                            <span id="eUserpic" v-show="isLogin" @mouseenter="showUserBox=true">
                            <img src="/images/dftouxiang.jpg" width="30" height="30" title="IT培训课程-IT培训在线课程-培训-视频-教程-优就业" alt="IT培训课程-IT培训在线课程-培训-视频-教程-优就业">
                            </span>
                        </a>
                        <div class="eUserBox" v-show="showUserBox && isLogin" @mouseleave="showUserBox=false">
                            <a href="/mycourse/index/" rel="nofollow">我的课程</a>
                            <a href="/favorite/index/" rel="nofollow">我的收藏</a>
                            <a href="/orders/myorders/" rel="nofollow">我的订单</a>
                            <a href="/determine/relist" rel="nofollow">我的测评</a>
                            <a href="/mycoupon/index/" rel="nofollow">我的优惠券</a>
                            <a href="/user/index" rel="nofollow">帐号设置</a>
                            <a @click="outlogin" href="javascript:;" rel="nofollow">退出登录</a>
                        </div>
                    </div>
                    <div class="zg_index_sys">
                        <span>&nbsp;</span>
                        <div class="zg_index_ewm">
                            <div class="zg_index_de">
                                <img src="/it/images/ujyx_16.jpg" alt="IT优学APP">
                                <p>扫码下载<br>IT优学APP</p>
                            </div>
                            <div class="zg_index_de">
                                <img src="/it/images/ujyx_17.jpg" alt="中公优就业">
                                <p>扫码关注<br>中公优就业</p>
                            </div>
                        </div>
                    </div>
                    <div class="eTopShopCart">
                        <a class="eTopcen" rel="nofollow" href="/shopcart/cart_to_shop/"><span id="J-shoping-num"></span></a>
                    </div>
                    <form action="/list/" method="get">
                        <div class="eSecher eSecher1" style="width: 30px; overflow: hidden;">
                            <div class="formInp" style="">
                                <input type="text" name="title" class="eTxt" placeholder="搜索课程" value="" style="display: inline-block; width: 0px; overflow: hidden;">
                                <input type="submit" class="eSub" value="">
                            </div>
                            <span class="eSub02" style="display: none;"></span>
                        </div>
                    </form>
                </div>

                <!--                Logo 图-->
                <a class="eLogo" href="/">
                    <img title="优学-IT职业在线教育" src="/it/images/logo_it.jpg" alt="IT培训课程-IT培训在线课程-培训-视频-教程-优就业">
                </a>

                <!--                频道导航-->

                <div class="e_nav">
                    <div class="e_nd" id="it_index_span" @mouseenter="changeActive(0,true)" @mouseleave="changeActive(0,false)">
                        <a target="_self" href="/" class="">首页</a>
                        <em v-if="channelActive[0].isActive"></em>
                    </div>
                    <div class="e_nd jpkc" id="it_index_jpkc">
                        <i>&nbsp;</i>
                        <a target="_self" href="/list">精品课程</a>
                        <ul class="zg_jpkcx" >
                            <li><a href="/list/?price=2" target="_blank">免费课程</a></li>
                            <li><a href="/list/?price=1" target="_blank">精品网课</a></li>
                        </ul>
                    </div>
                    <div class="e_nd"><a target="_self" href="/zhibo/">在线直播</a></div>
                    <div class="e_nd"><a target="_blank" href="/ke/">IT培训班</a></div>
                    <div class="e_nd"><a target="_blank" href="http://www.ujiuye.com/">IT培训机构</a></div>
                    <div class="e_nd"><a target="_blank" href="/zt/2020zt/xthz/" rel="nofollow">在线就业班</a></div>
                    <div class="e_nd appXZ"><a target="_blank" href="/zt/ityxapp/" rel="nofollow" style="color:#ff4905;border:1px solid #ff4905;border-radius: 6px;">APP下载</a>
                        <dl class="zg_uxEwm">
                            <dt><img src="/it/images/ujyx_16.jpg" alt="IT优学APP"></dt>
                            <dd>扫码下载<br>IT优学APP</dd>
                        </dl>
                    </div>
                </div>
            </div>

            <!--            分类导航-->
            <div class="offcn_asidebg" v-if="isShowCategory"></div>
            <div class="offcn_aside" v-if="isShowCategory" >
                <dl v-for="category in categories" :key="category.id">
                    <dt><router-link   :to="{path:'/list-'+category.id}">{{category.name}}</router-link></dt>
                    <dd>
                        <router-link  v-for="subject in category.subjectList" :key="subject.id" :to="{path:'/list-'+subject.id}">{{subject.name}}</router-link>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
    import {getCategoriesApi} from "../network/category";
    import {userSignOutAPI,clearAuthCookieAPI} from "../network/usercenter";


    export default {
        name:'PageHeader',
        props:[
            "showCategory"
        ],
        data:function () {
            return {
                showUserBox:false,
                categories:[],
                channelActive:[
                    {isActive:false},{isActive:false},{isActive:false},{isActive:false},{isActive:false},{isActive:false},{isActive:false},
                ]
            }
        },
        computed:{
            isShowCategory:function () {
                return this.showCategory
            },
            isLogin:function () {
                return this.$store.getters.getUserLogin
            }
        },
        created() {
            this.getCategories()
            this.$store.dispatch('refreshUserInfo')
        },
        methods:{
            getCategories:function () {
                getCategoriesApi().then(res=>{
                    console.log(res);
                    this.categories = res
                })
            },
            outlogin:function () {
                userSignOutAPI()
                //刷新用户状态
                this.$store.dispatch('refreshUserInfo')
                clearAuthCookieAPI().then(res=>{
                    //刷新用户状态
                    this.$store.dispatch('refreshUserInfo')
                })
            },
            changeActive:function (idx,isActive) {
                this.channelActive[idx].isActive=isActive
            }

        }

    }


</script>

<style>
    @import "../../public/css/public.css";
    @import "../../public/it/css/layout.css";
    @import "../../public/it/css/skin.css";
    @import "../../public/it/css/global.css";
    @import "../../public/it/css/index.css";

    .jpkc:hover .zg_jpkcx{display: block}

    .zg_uxEwm {
        position: absolute;
        width: 150px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        top: 40px;
        left: -40px;
        display: none;
    }

    .zg_uxEwm dt {
        float: left;
        width: 80px;
    }

    .zg_uxEwm dd {
        text-align: center;
        font-family: 'Microsoft Yahei';
        font-size: 14px;
        color: #666;
        padding-top: 15px;
    }

    .appXZ:hover .zg_uxEwm {
        display: block;
    }
</style>